import { Col, Form, Input, InputNumber, Row, Select } from 'antd';
import React, { useCallback, useEffect, useImperativeHandle, useState } from 'react';
import { IUserAddOrEditForm, IUserFormRef } from '../type';
import cls from 'classnames';
import pageStyles from '@/common/pageLayout.less';
import { getYear } from '@/utils';
import { RegularExpression } from '@/common/constVariable';

export const UserAddOrEditForm = React.forwardRef<IUserFormRef, IUserAddOrEditForm>(
  (
    {
      detailInfoObj, //详情
      formValues, //第一步输入的表单值
      areadList, //新增区域
    },
    ref,
  ) => {
    const [userAddEditForm] = Form.useForm();

    // 是否是坐席
    const [isAgenSelect, setIsAgenSelect] = useState<boolean>(false);
    const isAgenSelCall = useCallback(
      (isBool: boolean) => {
        setIsAgenSelect(isBool);
      },
      [isAgenSelect],
    );

    useEffect(() => {
      if (formValues && JSON.stringify(formValues) != '{}') {
        userAddEditForm?.setFieldsValue(formValues);
        changeIsAgen(formValues?.isAgent);
      } else if (detailInfoObj && JSON.stringify(detailInfoObj) != '{}') {
        userAddEditForm?.setFieldsValue(detailInfoObj);
        changeIsAgen(detailInfoObj?.isAgent);
      }
    }, [detailInfoObj]);

    useImperativeHandle(ref, () => ({
      userAddEditForm: userAddEditForm,
    }));

    // 是否修改坐席
    const changeIsAgen = (values: any) => {
      if (values == 0) {
        isAgenSelCall(false);
        userAddEditForm?.setFieldsValue({ extNum: null });
      } else if (values == 1) {
        isAgenSelCall(true);
      }
    };

    //选则区域后回调
    // const selectAreaCallback = (selectArea: any) => {
    //   // saveSelectArea(selectArea);
    // };

    // 获取省市县数据
    // const getAreadList = () => {
    //   if (areadList && areadList?.data && areadList?.data?.msgFlag) {
    //     return areadList?.data?.obj;
    //   } else {
    //     return [];
    //   }
    // };

    return (
      <>
        <div className={cls(pageStyles['fromView-styles'])}>
          <Form labelAlign="right" form={userAddEditForm}>
            <Row>
              <Col span={12}>
                <Form.Item
                  label="登录名"
                  name="name"
                  rules={[
                    {
                      required: true,
                      message: '请输入登录名',
                    },
                    {
                      pattern: /^[a-zA-Z0-9_@/-]+$/,
                      message: '只能输入数字或字母或-、_、@',
                    },
                  ]}
                >
                  <Input placeholder="请输入登录名" allowClear />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="姓名"
                  name="realName"
                  rules={[
                    {
                      required: true,
                      message: '请输入姓名',
                    },
                  ]}
                >
                  <Input placeholder="请输入姓名" allowClear />
                </Form.Item>
              </Col>
            </Row>

            {!(detailInfoObj && detailInfoObj?.id) && (
              <Row>
                <Col span={12}>
                  <Form.Item
                    label={'密码'}
                    name="pwd"
                    initialValue={`Admin@${getYear()}.`}
                    rules={[
                      {
                        required: true,
                        message: '请输入密码',
                      },
                      {
                        pattern: new RegExp(
                          '^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$',
                          'g',
                        ),
                        message: '密码包括数字、小写字母、大写字母、特殊符号4类中至少3类',
                      },
                      {
                        min: 8,
                        message: '长度至少8位',
                      },
                    ]}
                  >
                    <Input disabled={detailInfoObj && detailInfoObj?.id ? false : true} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    label={'确认密码'}
                    name="confirmPwd"
                    initialValue={`Admin@${getYear()}.`}
                    rules={[
                      {
                        required: true,
                        message: '确认密码',
                      },
                    ]}
                  >
                    <Input disabled={detailInfoObj && detailInfoObj?.id ? false : true} allowClear />
                  </Form.Item>
                </Col>
              </Row>
            )}

            <Row>
              <Col span={12}>
                <Form.Item
                  label={'类型'}
                  name="userType"
                  initialValue={(detailInfoObj && detailInfoObj?.userType) || 0}
                  rules={[
                    {
                      required: true,
                      message: '请选择用户类型',
                    },
                  ]}
                >
                  <Select placeholder="请选择用户类型">
                    <Select.Option key={0} value={0}>
                      系统用户
                    </Select.Option>
                    <Select.Option key={1} value={1}>
                      应用用户
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="性别" name="sex" initialValue={(detailInfoObj && detailInfoObj?.sex) || 0}>
                  <Select placeholder="请选择性别">
                    <Select.Option key={0} value={0}>
                      未知
                    </Select.Option>
                    <Select.Option key={1} value={1}>
                      男
                    </Select.Option>
                    <Select.Option key={2} value={2}>
                      女
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <Form.Item
                  label={'工号'}
                  name="workNum"
                  initialValue={detailInfoObj && detailInfoObj?.workNum}
                  // rules={[
                  //   {
                  //     required: true,
                  //     message: '请输入工号',
                  //   },
                  //   {
                  //     pattern: RegularExpression.workNum,
                  //     message: '只能输入字母和数字，最大长度为8位',
                  //   },
                  // ]}
                >
                  <Input placeholder="请输入工号" allowClear />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={'手机'}
                  name="phoneMobile"
                  initialValue={detailInfoObj && detailInfoObj?.phoneMobile}
                  rules={[
                    {
                      pattern: RegularExpression?.phone,
                      message: '手机号格式错误！',
                    },
                  ]}
                >
                  <Input placeholder="请输入手机号" allowClear />
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <Form.Item
                  label={'电话'}
                  name="phoneOffice"
                  initialValue={detailInfoObj && detailInfoObj?.phoneOffice}
                  rules={[
                    {
                      required: false,
                      pattern: /^[1-9][0-9]{0,10}$/,
                      message: '请输入办公电话',
                    },
                  ]}
                >
                  <Input placeholder="请输入办公电话" allowClear />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={'排序'}
                  name="seq"
                  initialValue={(detailInfoObj && detailInfoObj?.seq) || 0}
                  rules={[
                    {
                      required: true,
                      message: '请输入排序',
                    },
                  ]}
                >
                  <InputNumber placeholder="请输入排序" min={0} />
                </Form.Item>
              </Col>
            </Row>

            {/* <Row>
              <Col span={12}>
                <Form.Item
                  label={'QQ号'}
                  name="qqNum"
                  initialValue={detailInfoObj && detailInfoObj?.qqNum}
                  rules={[
                    {
                      pattern: RegularExpression?.qq,
                      message: 'QQ号格式不正确',
                    },
                  ]}
                >
                  <Input placeholder="请输入QQ号" allowClear />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={'微信号'}
                  name="wechatNum"
                  initialValue={detailInfoObj && detailInfoObj?.wechatNum}
                  rules={[
                    {
                      pattern: RegularExpression?.weChat,
                      message: '微信号格式不正确',
                    },
                  ]}
                >
                  <Input placeholder="请输入微信号" allowClear />
                </Form.Item>
              </Col>
            </Row> */}

            <Row>
              <Col span={24}>
                <Form.Item
                  label={'邮箱'}
                  name="emailNum"
                  initialValue={detailInfoObj && detailInfoObj?.emailNum}
                  rules={[
                    {
                      required: false,
                      pattern: RegularExpression?.email,
                      message: '邮箱格式不正确',
                    },
                  ]}
                >
                  <Input placeholder="请输入邮箱" />
                </Form.Item>
              </Col>
              {/* <Col span={12}>
                <Form.Item
                  label={'邮编'}
                  name="zipcode"
                  initialValue={detailInfoObj && detailInfoObj?.zipcode}
                  rules={[
                    {
                      pattern: RegularExpression?.zipCode,
                      message: '不能输入汉字',
                    },
                  ]}
                >
                  <Input placeholder="请输入邮编" allowClear />
                </Form.Item>
              </Col> */}
            </Row>

            {/* <Row>
              <Col span={12}>
                <Form.Item
                  label={'是否坐席'}
                  name="isAgent"
                  initialValue={(detailInfoObj && detailInfoObj?.isAgent) || 0}
                >
                  <Select placeholder="请选择是否坐席" onChange={changeIsAgen}>
                    <Select.Option key={0} value={0}>
                      否
                    </Select.Option>
                    <Select.Option key={1} value={1}>
                      是
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={'分机号'}
                  name="extNum"
                  initialValue={detailInfoObj && detailInfoObj?.extNum}
                  rules={[
                    {
                      required: isAgenSelect,
                      message: '请输入分机号',
                    },
                  ]}
                >
                  <Input
                    placeholder={isAgenSelect ? '请输入分机号' : '无需填写'}
                    disabled={isAgenSelect ? false : true}
                  />
                </Form.Item>
              </Col>
            </Row> */}

            <Row>
              {/* <AdminAriea
                cascaderData={getAreadList()}
                colSpan={24}
                isRequired={false}
                labelName="行政区域"
                formName="node"
                allDataID={
                  detailInfoObj &&
                    detailInfoObj?.id &&
                    (detailInfoObj.provinceCode ||
                      detailInfoObj.cityCode ||
                      detailInfoObj.countyCode)
                    ? [
                      detailInfoObj.provinceCode,
                      detailInfoObj.cityCode,
                      detailInfoObj.countyCode,
                    ]
                    : []
                }
                areaAll={selectAreaCallback} // 这个是用户选择数据后，会返回的数据 function
                showSearch={true}
                fieldNames={{ label: 'text', value: 'id' }}
                allowClear={true}
              // viewId={viewId}
              /> */}
              <Col span={24}>
                <Form.Item label="地址" name="address" initialValue={detailInfoObj && detailInfoObj?.address}>
                  <Input placeholder="请输入地址" allowClear />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="备注" name="remark" initialValue={detailInfoObj && detailInfoObj?.remark}>
                  <Input placeholder="请输入地址" allowClear />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </>
    );
  },
);
